"use client"

import { useState } from "react"
import { motion } from "framer-motion"
import { useAuth } from "@/hooks/useAuth"
import Link from "next/link"
import {
  MessageSquare,
  Plus,
  Search,
  TrendingUp,
  Users,
  Heart,
  MessageCircle,
  Share2,
  Pin,
  Award,
  FlameIcon as Fire,
} from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Textarea } from "@/components/ui/textarea"

const mockPosts = [
  {
    id: 1,
    title: "Kaggle House Prices 竞赛心得分享",
    content: "刚刚在House Prices竞赛中获得了银牌，想分享一些特征工程的心得...",
    author: "Alex Chen",
    avatar: "/placeholder.svg?height=40&width=40",
    category: "经验分享",
    tags: ["Kaggle", "Machine Learning", "特征工程"],
    likes: 156,
    replies: 23,
    views: 1240,
    createdAt: "2小时前",
    isPinned: true,
    isHot: true,
  },
  {
    id: 2,
    title: "寻找队友：Google AI Challenge 2024",
    content: "我是一名有3年ML经验的工程师，寻找2-3名队友一起参加Google AI Challenge...",
    author: "Sarah Kim",
    avatar: "/placeholder.svg?height=40&width=40",
    category: "组队招募",
    tags: ["Google", "AI", "组队"],
    likes: 89,
    replies: 45,
    views: 890,
    createdAt: "4小时前",
    isPinned: false,
    isHot: true,
  },
  {
    id: 3,
    title: "深度学习模型调参技巧总结",
    content: "整理了一些在竞赛中常用的深度学习调参技巧，希望对大家有帮助...",
    author: "Mike Johnson",
    avatar: "/placeholder.svg?height=40&width=40",
    category: "技术讨论",
    tags: ["Deep Learning", "调参", "技巧"],
    likes: 234,
    replies: 67,
    views: 2100,
    createdAt: "6小时前",
    isPinned: false,
    isHot: false,
  },
  {
    id: 4,
    title: "天池智慧城市AI挑战赛数据分析",
    content: "对天池最新的智慧城市竞赛数据进行了初步分析，发现了一些有趣的模式...",
    author: "Lisa Wang",
    avatar: "/placeholder.svg?height=40&width=40",
    category: "数据分析",
    tags: ["天池", "数据分析", "智慧城市"],
    likes: 78,
    replies: 12,
    views: 560,
    createdAt: "8小时前",
    isPinned: false,
    isHot: false,
  },
  {
    id: 5,
    title: "Web3 Hackathon 项目创意征集",
    content: "下个月要参加一个Web3 Hackathon，想征集一些有创意的项目想法...",
    author: "Tom Zhang",
    avatar: "/placeholder.svg?height=40&width=40",
    category: "创意征集",
    tags: ["Web3", "Hackathon", "创意"],
    likes: 45,
    replies: 28,
    views: 420,
    createdAt: "12小时前",
    isPinned: false,
    isHot: false,
  },
  {
    id: 6,
    title: "新手如何开始第一次竞赛？",
    content: "作为一个编程新手，想参加竞赛但不知道从哪里开始，求大神指导...",
    author: "Emma Liu",
    avatar: "/placeholder.svg?height=40&width=40",
    category: "新手求助",
    tags: ["新手", "入门", "指导"],
    likes: 67,
    replies: 34,
    views: 780,
    createdAt: "1天前",
    isPinned: false,
    isHot: false,
  },
]

const categories = ["全部", "经验分享", "技术讨论", "组队招募", "数据分析", "创意征集", "新手求助"]

const hotTopics = [
  { name: "Kaggle竞赛技巧", posts: 156, trend: "+12%" },
  { name: "深度学习调参", posts: 89, trend: "+8%" },
  { name: "Web3开发", posts: 67, trend: "+15%" },
  { name: "数据预处理", posts: 134, trend: "+5%" },
  { name: "组队经验", posts: 78, trend: "+20%" },
]

const topContributors = [
  { name: "Alex Chen", avatar: "/placeholder.svg?height=32&width=32", posts: 45, likes: 1200 },
  { name: "Sarah Kim", avatar: "/placeholder.svg?height=32&width=32", posts: 38, likes: 980 },
  { name: "Mike Johnson", avatar: "/placeholder.svg?height=32&width=32", posts: 32, likes: 850 },
  { name: "Lisa Wang", avatar: "/placeholder.svg?height=32&width=32", posts: 28, likes: 720 },
]

export default function DiscussPage() {
  const { user, isLoading } = useAuth()
  const [searchQuery, setSearchQuery] = useState("")
  const [selectedCategory, setSelectedCategory] = useState("全部")
  const [showNewPost, setShowNewPost] = useState(false)
  const [newPostTitle, setNewPostTitle] = useState("")
  const [newPostContent, setNewPostContent] = useState("")

  const filteredPosts = mockPosts.filter((post) => {
    const matchesSearch =
      post.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
      post.content.toLowerCase().includes(searchQuery.toLowerCase())
    const matchesCategory = selectedCategory === "全部" || post.category === selectedCategory

    return matchesSearch && matchesCategory
  })

  const handleNewPost = () => {
    // 模拟发布帖子
    setShowNewPost(false)
    setNewPostTitle("")
    setNewPostContent("")
  }

  if (isLoading) {
    return (
      <div className="min-h-screen pt-20 flex items-center justify-center">
        <div className="text-center">
          <div className="animate-spin rounded-full h-32 w-32 border-b-2 border-blue-500 mx-auto mb-4"></div>
          <p className="text-gray-300">加载中...</p>
        </div>
      </div>
    )
  }

  if (!user) {
    return (
      <div className="min-h-screen pt-20 flex items-center justify-center">
        <div className="text-center max-w-md mx-auto px-4">
          <div className="glass p-8 rounded-2xl">
            <MessageSquare className="w-16 h-16 text-blue-400 mx-auto mb-4" />
            <h2 className="text-2xl font-bold text-white mb-4">需要登录</h2>
            <p className="text-gray-300 mb-6">
              请登录后访问讨论社区，与其他开发者交流技术经验。
            </p>
            <Link href="/auth/login">
              <Button className="bg-gradient-to-r from-blue-500 to-purple-500 hover:from-blue-600 hover:to-purple-600 w-full">
                前往登录
              </Button>
            </Link>
          </div>
        </div>
      </div>
    )
  }

  return (
    <div className="min-h-screen pt-20">
      <div className="container mx-auto px-4 py-8">
        {/* 头部 */}
        <motion.div initial={{ opacity: 0, y: -20 }} animate={{ opacity: 1, y: 0 }} className="text-center mb-12">
          <h1 className="text-responsive-4xl font-bold mb-4 text-gradient-animate">讨论社区</h1>
          <p className="text-responsive-xl text-gray-200 mb-8">分享经验，交流技术，寻找队友</p>

          {/* 搜索和发布 */}
          <div className="max-w-4xl mx-auto flex flex-col md:flex-row gap-4 mb-6">
            <div className="flex-1 relative">
              <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-300 w-5 h-5" />
              <Input
                placeholder="搜索帖子、用户..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="pl-12 glass-light border-0 text-white placeholder-gray-400"
              />
            </div>
            <motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>
              <Button
                onClick={() => setShowNewPost(true)}
                className="bg-gradient-to-r from-green-500 to-blue-500 hover:from-green-600 hover:to-blue-600 gap-2"
              >
                <Plus className="w-4 h-4" />
                发布帖子
              </Button>
            </motion.div>
          </div>

          {/* 分类标签 */}
          <div className="flex flex-wrap justify-center gap-2">
            {categories.map((category) => (
              <motion.div key={category} whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>
                <Badge
                  variant={selectedCategory === category ? "default" : "outline"}
                  className={`cursor-pointer transition-all duration-300 ${
                    selectedCategory === category
                      ? "bg-blue-500 text-white"
                      : "text-gray-200 border-gray-500 hover:border-blue-400 hover:text-blue-300"
                  }`}
                  onClick={() => setSelectedCategory(category)}
                >
                  {category}
                </Badge>
              </motion.div>
            ))}
          </div>
        </motion.div>

        <div className="grid grid-cols-1 lg:grid-cols-4 gap-8">
          {/* 主要内容 */}
          <div className="lg:col-span-3">
            {/* 发布新帖子 */}
            {showNewPost && (
              <motion.div initial={{ opacity: 0, y: -20 }} animate={{ opacity: 1, y: 0 }} className="mb-6">
                <Card className="glass border-0">
                  <CardHeader>
                    <CardTitle className="text-white">发布新帖子</CardTitle>
                  </CardHeader>
                  <CardContent className="space-y-4">
                    <Input
                      placeholder="输入帖子标题..."
                      value={newPostTitle}
                      onChange={(e) => setNewPostTitle(e.target.value)}
                      className="glass-light border-0 text-white placeholder-gray-400"
                    />
                    <Textarea
                      placeholder="分享你的想法、经验或问题..."
                      value={newPostContent}
                      onChange={(e) => setNewPostContent(e.target.value)}
                      className="glass-light border-0 text-white placeholder-gray-400 min-h-[120px]"
                    />
                    <div className="flex justify-end gap-2">
                      <Button
                        variant="outline"
                        onClick={() => setShowNewPost(false)}
                        className="bg-transparent text-gray-200 border-gray-500"
                      >
                        取消
                      </Button>
                      <Button
                        onClick={handleNewPost}
                        className="bg-gradient-to-r from-blue-500 to-purple-500 hover:from-blue-600 hover:to-purple-600"
                      >
                        发布
                      </Button>
                    </div>
                  </CardContent>
                </Card>
              </motion.div>
            )}

            {/* 帖子列表 */}
            <div className="space-y-4">
              {filteredPosts.map((post, index) => (
                <motion.div
                  key={post.id}
                  initial={{ opacity: 0, y: 20 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ delay: index * 0.1 }}
                >
                  <Card className="glass border-0 card-hover">
                    <CardContent className="p-6">
                      <div className="flex items-start gap-4">
                        <Avatar className="w-12 h-12">
                          <AvatarImage src={post.avatar || "/placeholder.svg"} />
                          <AvatarFallback>{post.author[0]}</AvatarFallback>
                        </Avatar>

                        <div className="flex-1">
                          <div className="flex items-center gap-2 mb-2">
                            <h3 className="font-semibold text-lg text-white hover:text-blue-400 cursor-pointer transition-colors">
                              {post.title}
                            </h3>
                            {post.isPinned && <Pin className="w-4 h-4 text-yellow-400" />}
                            {post.isHot && <Fire className="w-4 h-4 text-red-400" />}
                          </div>

                          <div className="flex items-center gap-2 mb-2">
                            <span className="text-sm font-medium text-gray-200">{post.author}</span>
                            <Badge variant="outline" className="text-xs text-gray-300 border-gray-600">
                              {post.category}
                            </Badge>
                            <span className="text-xs text-gray-400">{post.createdAt}</span>
                          </div>

                          <p className="text-gray-300 mb-3 line-clamp-2">{post.content}</p>

                          <div className="flex flex-wrap gap-1 mb-3">
                            {post.tags.map((tag) => (
                              <Badge key={tag} variant="outline" className="text-xs text-gray-400 border-gray-700">
                                #{tag}
                              </Badge>
                            ))}
                          </div>

                          <div className="flex items-center justify-between">
                            <div className="flex items-center gap-4 text-sm text-gray-400">
                              <motion.button
                                whileHover={{ scale: 1.1 }}
                                whileTap={{ scale: 0.9 }}
                                className="flex items-center gap-1 hover:text-red-400 transition-colors"
                              >
                                <Heart className="w-4 h-4" />
                                <span>{post.likes}</span>
                              </motion.button>
                              <motion.button
                                whileHover={{ scale: 1.1 }}
                                whileTap={{ scale: 0.9 }}
                                className="flex items-center gap-1 hover:text-blue-400 transition-colors"
                              >
                                <MessageCircle className="w-4 h-4" />
                                <span>{post.replies}</span>
                              </motion.button>
                              <span className="flex items-center gap-1">
                                <Users className="w-4 h-4" />
                                <span>{post.views}</span>
                              </span>
                            </div>
                            <motion.button
                              whileHover={{ scale: 1.1 }}
                              whileTap={{ scale: 0.9 }}
                              className="text-gray-400 hover:text-blue-400 transition-colors"
                            >
                              <Share2 className="w-4 h-4" />
                            </motion.button>
                          </div>
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                </motion.div>
              ))}
            </div>
          </div>

          {/* 侧边栏 */}
          <div className="lg:col-span-1">
            <motion.div
              initial={{ opacity: 0, x: 20 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ delay: 0.3 }}
              className="space-y-6"
            >
              {/* 热门话题 */}
              <Card className="glass border-0 card-hover">
                <CardHeader>
                  <CardTitle className="text-lg flex items-center gap-2 text-white">
                    <TrendingUp className="w-5 h-5 text-orange-400" />
                    热门话题
                  </CardTitle>
                </CardHeader>
                <CardContent className="space-y-3">
                  {hotTopics.map((topic, index) => (
                    <motion.div
                      key={topic.name}
                      initial={{ opacity: 0, x: 20 }}
                      animate={{ opacity: 1, x: 0 }}
                      transition={{ delay: 0.5 + index * 0.1 }}
                      className="flex items-center justify-between p-2 rounded-lg hover:bg-white/5 cursor-pointer transition-colors"
                    >
                      <div>
                        <div className="font-medium text-sm text-white">{topic.name}</div>
                        <div className="text-xs text-gray-400">{topic.posts} 个帖子</div>
                      </div>
                      <Badge variant="outline" className="text-xs text-green-400 border-green-600">
                        {topic.trend}
                      </Badge>
                    </motion.div>
                  ))}
                </CardContent>
              </Card>

              {/* 活跃贡献者 */}
              <Card className="glass border-0 card-hover">
                <CardHeader>
                  <CardTitle className="text-lg flex items-center gap-2 text-white">
                    <Award className="w-5 h-5 text-purple-400" />
                    活跃贡献者
                  </CardTitle>
                </CardHeader>
                <CardContent className="space-y-3">
                  {topContributors.map((user, index) => (
                    <motion.div
                      key={user.name}
                      initial={{ opacity: 0, x: 20 }}
                      animate={{ opacity: 1, x: 0 }}
                      transition={{ delay: 0.7 + index * 0.1 }}
                      className="flex items-center gap-3 p-2 rounded-lg hover:bg-white/5 cursor-pointer transition-colors"
                    >
                      <Avatar className="w-8 h-8">
                        <AvatarImage src={user.avatar || "/placeholder.svg"} />
                        <AvatarFallback className="text-xs">{user.name[0]}</AvatarFallback>
                      </Avatar>
                      <div className="flex-1">
                        <div className="font-medium text-sm text-white">{user.name}</div>
                        <div className="text-xs text-gray-400">
                          {user.posts} 帖子 • {user.likes} 赞
                        </div>
                      </div>
                    </motion.div>
                  ))}
                </CardContent>
              </Card>

              {/* 社区统计 */}
              <Card className="glass border-0 card-hover">
                <CardHeader>
                  <CardTitle className="text-lg flex items-center gap-2 text-white">
                    <MessageSquare className="w-5 h-5 text-blue-400" />
                    社区统计
                  </CardTitle>
                </CardHeader>
                <CardContent className="space-y-3">
                  <div className="text-center">
                    <div className="text-2xl font-bold text-blue-400 mb-1">2.4K</div>
                    <div className="text-sm text-gray-300">总帖子数</div>
                  </div>
                  <div className="text-center">
                    <div className="text-2xl font-bold text-green-400 mb-1">856</div>
                    <div className="text-sm text-gray-300">活跃用户</div>
                  </div>
                  <div className="text-center">
                    <div className="text-2xl font-bold text-purple-400 mb-1">12.8K</div>
                    <div className="text-sm text-gray-300">总互动数</div>
                  </div>
                </CardContent>
              </Card>
            </motion.div>
          </div>
        </div>
      </div>
    </div>
  )
}
